<script setup>
import { ref } from 'vue'

const excludeCmsFile = ref(true)
const allSites = ref(['东莞', '新加坡', '德国', '俄罗斯'])
const selectedSites = ref(['东莞'])

const save = () => {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const tabId = tabs[0].id
    chrome.tabs.sendMessage(
      tabId,
      {
        action: 'configSave',
        data: {
          selectedSites: selectedSites.value,
          excludeCmsFile: excludeCmsFile.value
        }
      },
      null,
      (callbackRsp) => {
        if (callbackRsp === 'configSaveSucc') {
          showNotify({ type: 'primary', message: '保存成功，继续操作吧' })
        } else {
          showNotify({ type: 'danger', message: '保存失败，刷新下页面呢' })
        }
      }
    )
  })
}
</script>

<template>
  <div class="config">
    <div class="switch-exclude-cms">
      <span>是否排除cms文件：</span>
      <van-radio-group v-model="excludeCmsFile" direction="horizontal">
        <van-radio :name="true">排除</van-radio>
        <van-radio :name="false">不排除</van-radio>
      </van-radio-group>
    </div>
    <div class="current-sites">
      <span>选择当前站点：</span>
      <van-checkbox-group v-model="selectedSites" direction="horizontal">
        <van-checkbox v-for="item in allSites" :key="item" :name="item">{{ item }}</van-checkbox>
      </van-checkbox-group>
    </div>
    <van-button type="primary" size="small" @click="save">保存</van-button>
  </div>
</template>

<style lang="less" scoped>
.config {
  margin: 0 16px;

  .switch-exclude-cms {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 16px 0;
  }

  .current-sites {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 16px;
  }
}
</style>
